<template>
    <view class="bill-container flex fd-c">
        <topBar :back="true">
            <template #center>
                <!-- 导航栏 -->
                <view class="nav-bar flex ai-c jc-c">
                    <view class="nav-tabs flex ai-c" style="font-size: 32rpx;font-weight: 700;color: #333;">
                        公告
                    </view>
                </view>
            </template>
        </topBar>
        <!-- 内容区域 -->
        <scroll-view class="scrollable-content" scroll-y>
            <view class="announcement-item" v-for="item in announcementList" :key="item.id">
                <view class="announcement-icon" v-if="item.weigh == 1">
                    NEW
                </view>
                <view class="announcement-title">
                    {{ item.name }}
                </view> 
                <view class="announcement-content">
                    <rich-text :nodes="item.content"></rich-text>
                </view>
                <view class="announcement-time">
                   {{ formatTime(item.createtime) }}
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import topBar from '@/components/topBar.vue'
import { ref } from 'vue'
import api from '@/api'
import { onLoad } from '@dcloudio/uni-app'
import { formatTime } from '@/utils/utils'
const announcementList = ref([])
onLoad(() => {
    api.getAnnouncementList().then(res => {
        announcementList.value = res.data
    })
})
</script>

<style scoped>
.bill-container {
    height: 100vh;
    background-color: #f7f7f7;
    position: relative;
    display: flex;
    flex-direction: column;
}

.scrollable-content {
    padding: 32rpx;
    box-sizing: border-box;
}

.announcement-item {
    padding: 32rpx;
    background-color: #fff;
    border-radius: 32rpx;
    margin-bottom: 24rpx;
}

.announcement-icon {
    display: inline-block;
    font-size: 20rpx;
    color: #FFF;
    font-weight: 600;
    background-color: #FF3535;
    border-radius: 12rpx;
    width: 56rpx;
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    margin-bottom: 24rpx;
}

.announcement-title {
    font-size: 28rpx;
    color: #000;
    font-weight: 700;
    margin-bottom: 24rpx;
}

.announcement-content {
    font-size: 24rpx;
    margin-bottom: 24rpx;
    color: #000;
}

.announcement-time {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.4);
}
</style>
